import React, { Component } from 'react'
import '@/assets/testcomponent.scss'


// 使用的是函数式组件
const Header = () => {
  return (
    <div className="header">
      <span>我是函数式组件的头部</span>
    </div>
  )
}


const AsideLeft = props => {
  let { msg } = props
  return (
    <div className="aside">
      <div className="aside-left">
        <span>我是函数式组件的左侧菜单栏</span>
      </div>
      <div className="aside-main">
        <span>我是函数式组件的右侧内容</span><br/>
        <span>收到来自父元素的信息：{ msg }</span>
      </div>
    </div>
  )
}


export default class TestComponent extends Component {

  render () {
    return (
      <div className='container'>
        <Header />
        <AsideLeft msg={ 'hello, 我是父元素，你好呀！子元素' }/>
      </div>
    )
  }
}